<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 50px;
        }
    </style>
    <script>
        //商品数据
        var books = [
            {
                id: 1,
                name: 'JavaScript高级程序设计',
                img: 'img/1.jpg',
                price: 75.7,
                stock: 10
            },
            {
                id: 2,
                name: '深入解析CSS(图灵出品)',
                img: 'img/2.jpg',
                price: 109,
                stock: 110
            },
            {
                id: 3,
                name: 'HTML5权威指南(图灵出品)',
                img: 'img/3.jpg',
                price: 101.9,
                stock: 80
            },
            {
                id: 4,
                name: 'Vue.js 3.0从入门到实战（微课视频版）',
                img: 'img/4.jpg',
                price: 89.8,
                stock: 70
            },
            {
                id: 5,
                name: 'React全家桶',
                img: 'img/5.jpg',
                price: 133.2,
                stock: 40
            }
        ];
        //获取用户输入的搜索内容
        function getParam(dataName) {
            var search = location.search;
            search = search.substring(1);
            // console.log(search);
            var paramArray = search.split('&');
            // console.log(paramArray);
            var value;
            paramArray.forEach(val => {
                var re = val.split('=');
                // console.log(re[0], re[1]);
                if (re[0] == dataName) {
                    value = re[1];
                }
            });
            return value;
        }
        window.onload = function () {
            var search = decodeURIComponent(getParam('search'));
            // console.log(search);
            //过滤数组中商品，只留下搜索相关商品
            var re = books.filter(val => val.name.toLowerCase().indexOf(search.toLowerCase()) != -1);
            // console.log(re);
            //存储页面内容
            var content='';
            re.forEach(val=>{
                content+=`<tr>
                    <td>
                        <img src="${val.img}">
                    </td>
                    <td>${val.name}</td>
                    <td>${val.price}元</td>
                    <td>
                        <input type="button" value="-" onclick="subStock(event)">
                        <input type="text" value="${val.stock}">
                        <input type="button" value="+" onclick="sumStock(event)">
                    </td>
                    <td><span onclick="del(event)">删除</span></td>
                </tr>`;
            });
            document.querySelector('tbody').innerHTML=content;

        }
        function del(event){
            event.target.parentElement.parentElement.remove();
        }
        //减数量
        function subStock(event){
            // console.log('减');
            //获取减的数量值
            var stock=event.target.nextElementSibling.value;
            // console.log(stock);
            if(stock>1){
                event.target.nextElementSibling.value=stock-1;
            }else{
                alert('数量最少为1!');
            }
        }
        //加数量
        function sumStock(event){
            // console.log('加');
            //获取减的数量值
            var stock=event.target.previousElementSibling.value;
            event.target.previousElementSibling.value=Number(stock)+1;
        }
    </script>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>图片</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

</html>